<template>
    <div>
        <div>
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">消息</div>
                <div name="right">
                    <van-icon class="icons" name="browsing-history-o" @click="newActive" />
                </div>
            </div>
            <!-- center -->
            <div>
                <van-row type="flex" class="py-2">
                    <van-col span="4" class="text-center">
                        <van-image
                            width="32px"
                            height="40px"
                            fit="contain"
                            src="https://cdn3.axureshop.com/demo/1525603/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83%E4%B8%BB%E9%A1%B5/u6852.png"
                        />
                    </van-col>
                    <van-col span="16" class="border-bottom" @click="XiTon">
                        <div v-for="(item, index) in xiton" :key="index">
                            <div class="font-sm">{{ item.title }}</div>
                            <div class="font-mi text-light-muted py">{{ item.text }}</div>
                        </div>
                    </van-col>
                    <van-col span="4" class="font-mi text-light-muted">23小时前</van-col>
                </van-row>
            </div>
            <!-- dingdan -->
            <div>
                <van-row type="flex" class="py-2">
                    <van-col span="4" class="text-center">
                        <van-image
                            width="32px"
                            height="40px"
                            fit="contain"
                            src="https://cdn3.axureshop.com/demo/1525603/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83%E4%B8%BB%E9%A1%B5/u6860.png"
                        />
                    </van-col>
                    <van-col span="16" class="border-bottom" @click="DingDan">
                        <div v-for="(item, index) in dingdan" :key="index">
                            <div class="font-sm">{{ item.title }}</div>
                            <div class="font-mi text-light-muted py">{{ item.text }}</div>
                        </div>
                    </van-col>
                    <van-col span="4" class="font-mi text-light-muted">23小时前</van-col>
                </van-row>
            </div>
            <!-- huodon -->
            <div>
                <van-row type="flex" class="py-2">
                    <van-col span="4" class="text-center">
                        <van-image
                            width="32px"
                            height="40px"
                            fit="contain"
                            src="https://cdn3.axureshop.com/demo/1525603/images/%E6%B6%88%E6%81%AF%E4%B8%AD%E5%BF%83%E4%B8%BB%E9%A1%B5/u6868.png"
                        />
                    </van-col>
                    <van-col span="16" class="border-bottom">
                        <div v-for="(item, index) in huodon" :key="index" @click="HuoDon">
                            <div class="font-sm">{{ item.title }}</div>
                            <div class="font-mi text-light-muted py">{{ item.text }}</div>
                        </div>
                    </van-col>
                    <van-col span="4" class="font-mi text-light-muted">23小时前</van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
import { outSuccess } from '../../https/Commit'
export default {
    data() {
        return {
            xiton: [
                {
                    title: '系统通知',
                    text: '我是文本'
                }
            ],
            dingdan: [
                {
                    title: 'dingdan',
                    text: '我是文本'
                }
            ],
            huodon: [
                {
                    title: 'huodon',
                    text: '我是文本'
                }
            ]
        }
    },
    created() {
        // CommApi()
        //     .then((res) => {
        //         console.log('成功', res)
        //     })
        //     .catch((err) => {
        //         console.log('失败', err)
        //     })
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        newActive() {
            console.log('xxx')
            Dialog.confirm({
                message: '标记所有消息为已读?',
                theme: 'round-button'
            })
                .then(() => {
                    // on confirm
                    outSuccess()
                        .then((res) => {
                            console.log(res)
                            this.xiton[0].text = '消息已读'
                            console.log(this.xiton)
                            this.dingdan[0].text = '消息已读'
                            console.log(this.xiton)
                            this.huodon[0].text = '消息已读'
                            console.log(this.xiton)
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                })
                .catch(() => {
                    // on cancel
                })
        },
        XiTon() {
            console.log(1)
            this.$router.push('/HomeMess/OrdersView')
        },
        DingDan() {
            console.log(2)
            this.$router.push('/HomeMess/NotificationView')
        },
        HuoDon() {
            console.log(3)
            this.$router.push('/HomeMess/EventsView')
        }
    }
}
</script>

<style lang="scss" scoped>
.right {
    background: rgba(221, 170, 170, 0);
    color: #fff;
    .icons {
        color: #fff;
        font-size: 18px;
        line-height: 18px;
    }
}
</style>
